<template>
	<div>
		<el-dialog title="选择车系" v-model="showStart" size="small">
			<el-row :gutter="24">
				<el-col :span="8" style="margin-left:5px;">
					<el-input size="small" v-model="dictTreeSearchValue" placeholder="请输入内容" icon="search" @click="searchTree"></el-input>
				</el-col>
				<el-col :span="3" >
					<p class="queryLabel">所属品牌:</p>
				</el-col>
				<el-col :span="8">
					<el-select v-model="brand" left size="small" placeholder="请选择品牌" clearable>
						<el-option v-for="item in brandCombo" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-col>
				<el-col :span="4" style="margin-right:10px;margin-left: -5px;">
					<el-button type="primary" size="small" v-on:click="queryParamTree" >查询</el-button>
				</el-col>
				<el-col :span="24" style="margin-left:5px;">
					<div style="height: 3em;"></div>
				</el-col>
				<el-col :span="24" style="margin-left:5px; height: 250px;overflow: scroll;">
					<el-tree :data="paramTreeData" :filter-node-method="filterNode" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
				</el-col>
			</el-row>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showStart = false">取 消</el-button>
				<el-button type="primary" @click="saveCarSerices">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		prop: {
			showStart: false
		},
		watch: {
			showStart: function(start) {
				debugger;
				if(!start) {
					this.$emit('close');
				}

			},
		},
		data: function() {
			return {
				//树形图查询条件
				dictTreeSearchValue: "",
				paramTreeData: [],
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'label',
				},
				showStart: this.showStart,

				//选中的类型（车型/车系）
				carType: '',
				//选择的车辆信息
				datalabel: '',
				datavale: '',
				brand: "",
				brandCombo: "",
			}
		},
		methods: {
			//查询树节点
			searchTree: function() {
				if(this.$data.dictTreeSearchValue == "") {
					this.$message("请输入查询条件");
					this.queryParamTree();
					return;
				}
				this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
			},

			//点击资源树节点
			handleNodeClick(data) {

				this.$data.carType = data.type;
				this.$data.datalabel = data.label;
				this.$data.datavale = data.value;
			},
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				this.$http.get(this.API_ROOT + '/base/car/newTree', {
					params: {
						brand: this.$data.brand,
						showLevel: 0
					}
				}).then((response) => {
					this.$data.paramTreeData = response.data;
				}, (response) => {});
			},
			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			baseQuery: function() {
				this.$data.showStart = true;
				this.queryParamTree();
			},
			saveCarSerices: function() {
				debugger;
				if(this.$data.carType == '1') {
					this.$emit('insert', this.$data.datavale, this.$data.datalabel);
					//this.$data.comFormData.carModel=this.$data.datavale;
				} else {
					this.$message("未选中车系");
				}
				this.$data.showStart = false;
			},
		},
		//表单创建时执行
		created: function() {
			this.baseQuery();
			this.$http.get(this.API_ROOT + '/rbac/dept/combo').then((response) => {
				debugger;
				this.$data.brandCombo = response.data;
			}, (response) => {});
		}
	}
</script>
<style>

</style>